<template>
  <div>
    <h2>菜单添加</h2>
    <table border style="text-align: center;width: 500px">
      <tr>
        <td style="width: 150px;">父级菜单:</td>
        <td>
          <select v-model="form.pId" style="width: 180px;height: 30px;">
            <option label="顶级菜单" value='0' />
            <option v-for="item in Menus" :key="item.menuId" :label="item.menuName" :value="item.menuId" />
          </select>
        </td>
      </tr>
      <tr>
        <td>菜单名称:</td>
        <td><input style="width: 300px;height: 30px;" v-model="form.menuName" /></td>
      </tr>
      <tr>
        <td>跳转的Url地址:</td>
        <td><input style="width: 300px;height: 30px;" v-model="form.url" /></td>
      </tr>
      <tr style="width: 150px;height: 60px;">
        <td></td>
        <td>
           <el-button style="width: 150px;height: 40px;font-size: 20px;" type="primary"
           @click="Creat">保存</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';

const form = reactive({
  menuName: '',
  url:'',
  pId:'0'
})
import { ElMessage } from 'element-plus'
import router from '@/router';
const Creat=()=>{
  axios.post(`Menu/Add`,form).then((ret) => {
    console.log(ret.data)
    if(ret.data.code==1){
      ElMessage.success('添加成功')
      router.push('/MenuList')
      return
    }else{
      ElMessage.error(ret.data.message)
    }
  })
}
//钩子
onMounted(()=>{
  GetName()
})
//父级菜单下拉框
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Menus:any=ref([])
const GetName=()=>{
  axios.get('Menu/GetName', {
  }).then((ret) => {
    console.log(ret.data)
    Menus.value=ret.data.data
  })
}
</script>

<style scoped>

</style>